<script setup>
    import Product from '@/components/Product.vue';
    import router from '@/router/index.js';
    import {computed, ref} from "vue";

    import useCheckedCartStore from "@/stores/cart/CheckedCart.js"
    import { storeToRefs } from 'pinia';

    const Order = useCheckedCartStore();

    let props = defineProps(["curCartObj","id","curChecked"]);
    // console.log(props.CheckedObj);
    console.log(props.curCartObj);
    console.log("curChecked");
    console.log(props.curChecked);
    // checkCart.value= JSON.parse(JSON.stringify(props.curCartObj));
    // let checkGoodsList = props.curChecked.list || [];

//    整个有选数量的购物车
    // console.log(props.curCartObj);
    // 全选框计算属性
    const allChecked = computed({
        get(){
            // console.log(1);
          return  props.curCartObj.list.every(item => item.checked) 
        },
        set(data){
            // console.log(data);
            props.curCartObj.list.forEach(item => {
                item.checked=data
            })
        }
    })

    // // 选中的商品 
    // const checkGoodsList = computed(() =>{
    //     let list = props.curCartObj.list.filter(item => item.checked);

    //     // 生成订单实例
    //     // checkedCart.value.list=list;

    //     // console.log(checkedCart);
    //     return list;
    // }) 



    // 购物车购买商品的总数
    const tagNumber = computed(()=>{
        // console.log(checkGoodsList.value);
        // console.log(props.curChecked);
        let tgn= props.curChecked.list.reduce((sum,item) =>{
        return sum + item.number
        },0)

        // 给总数赋值，存入pinia中
        props.curCartObj.alNumber=tgn;
        return tgn

});

    //toFixed() 四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进
    // 计算总价
    const acount = computed(()=>{
     let price =  props.curChecked.list.reduce((sum,item)=> {
        return sum+item.number*item.price
    },0)
    // 给总价赋值，存入stores中
    props.curCartObj.acount=price.toFixed(2);
    // let re = props.CartItem.reverse();

    return price.toFixed(2);
    })

    // 清空购物车 curCartObj.list是响应式的
    const cleanCart = ()=>{
        // emit("EmptyForCart")
        props.curCartObj.list.forEach((item,index)=>{
            item.number=0;
            props.curChecked.list.splice(index);
        })

        isShow.value=false;

    }

    let isShow = ref(false);
// 提交购物车
    
    const orderConfirm = () =>{

        router.push({
            name:"OrderConfirm",        //id起始处
            query:{shopName: props.curCartObj.name,id:props.id,from:"shop"},
            // params:props.id  为了返回到shop不卡住
        })

    }

</script>

<template>
    <div class="cart">
        <div class="cart_mask" v-if="isShow" @click="isShow=false"></div>
        <div class="cart_product" v-if="isShow">
            <div class="cart_product_header" v-if="curCartObj.list.length>0">
                <div class="cart_product_header_allChecked">           <!--v-model:title="pageTitle"是父子组件双向绑定,在子组件中 通过 this.$emit('update:title',"vue3")可直接改变， -->
                    <input type="checkbox" class="circle-checkbox" v-model="allChecked"> 全选<!--普通的是子向父触发（this.$emit("add",msg)）一个方法，父: <子 :add="addNumber" />在自己的方法addNumber中改变数据。方法中有一个data属性-->
                </div>
                <div class="cart_product_header_clear" @click="cleanCart">清空购物车</div>
            </div>
            <div class="cart_product_list">
                <div class="cart_product_list_item" v-for="item,index in curCartObj.list">
                    <div class="checkbox">
                        <!-- <input type="checkbox" class="circle-checkbox" :checked="item.checked" @change="changeChecked(item)" name="" id=""> -->
                        <input type="checkbox" class="circle-checkbox" v-model="item.checked">
                    </div>
                    <div class="content">
                        <Product min="min" :item="item" />
                    </div>
                </div>
            </div>
        </div>
        <div class="cart_check">    
            <div class="cart_check_icon" @click="isShow=!isShow">
                <img src="http://www.dell-lee.com/imgs/vue3/basket.png" alt="">
                <span class="tag" v-if="tagNumber>0">{{ tagNumber }}</span>
            </div>
            <div class="cart_check_empty" v-if="curCartObj.list.length===0">购物车是空的</div>
            <div class="cart_check_content" v-else>
                <div class="cart_check_content_total_price">总计 : <span class="check_content_total_price_number">￥{{ acount }}</span></div>
                <div class="cart_check_content_submit" @click="orderConfirm">结算</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart {
    &_mask {
        position: absolute;
        top: 0;
        bottom: .5rem;
        left: 0;
        right: 0;
        background-color: rgba($color: #000000, $alpha: .4);
    }

    &_product {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: .5rem;
        background-color: $bgColor;

        //圆形复选框
        /* 设置选中背景 */
        .circle-checkbox:checked {
            background: #1673ff;
        }

        /* 设置复选框样式 */
        .circle-checkbox {
            width: .2rem;
            height: .2rem;
            background-color: #ffffff;
            border: solid 1px $light-fontColor;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            font-size: 0.8rem;
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
            vertical-align: top;
            cursor: default;
            -webkit-appearance: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* 设置伪类，即显现的对勾样式 */
        .circle-checkbox:checked::after {
            content: "";
            top: 5px;
            left: 4px;
            position: absolute;
            background: transparent;
            border: #fff solid 2px;
            border-top: none;
            border-right: none;
            height: 3px;
            width: 8px;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        &_header {
            padding: .18rem;
            display: flex;
            justify-content: space-between;
        }

        &_list {
            max-height: 3rem;
            overflow-y: scroll;

            &_item {
                display: flex;

                .checkbox {
                    display: flex;
                    align-items: center;
                    margin-left: .18rem;  
                }

                .content {
                    flex: 1;
                    width: 100%;
                }
            }
        }
    }

    &_check {
        width: 100%;
        height: .49rem;
        border-top: .01rem solid $content-bgColor;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        // 购物车图标
        &_icon {
            width: .84rem;
            height: .49rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            img {
                 width: .28rem;
                height: .26rem;
            }

            .tag {
                display: inline-block;
                width: .15rem;
                height: .15rem;
                border-radius: 50%;
                background-color: $hightlight-fontColor;
                color: $bgColor;
                font-size: .1rem;
                text-align: center;
                position: absolute;
                top: .05rem;
                right: .18rem;
            }
           
        }
        // 空购物车
        &_empty {
            line-height: .49rem;
        }
        // 总价
        &_content {
            flex: 1;
            display: flex;
            position: relative;
            width: 100%;

            &_total_price {
                flex: 1;
                line-height: .49rem;
                color: $hightlight-fontColor;

                &_number {
                    font-size: .18rem;
                }
            }
            &_submit {
                width: .98rem;
                height: .49rem;
                background-color: $btn-bgColor;
                color: $bgColor;
                text-align: center;
                line-height: .49rem;
            }
        }
    }
}
</style>